<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>个性化地图</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }

        #container {
            width: 100%;
            height: 100%;
        }
    </style>
    <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=4SCBZ-JRKLQ-3HS5W-GZSPH-VUF2J-AOFUI"></script>

    <script>
        var geocoder, map, marker, options, geolocation = null;
        window.onload = function () {

            options = { timeout: 8000 };
            function showPosition(position) {
                //调用地址解析类
                geocoder = new qq.maps.Geocoder({
                    complete: function (result) {
                        map.setCenter(result.detail.location);
                        var marker = new qq.maps.Marker({
                            map: map,
                            position: result.detail.location
                        });
                    }
                });
                var address = position.addr

                geocoder.getLocation(address);
            };

            function showErr() {
                // positionNum++;
            }

            function getQueryString(name) {
                let url = location.search; //获取url中"?"符后的字串
                let theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    let str = url.substr(1);
                    let strs = str.split("&");
                    for (let i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                    }
                }
                return theRequest[name];
            }

            function init() {
                // 创建地图
                map = new qq.maps.Map(document.getElementById("container"), {
                    center: new qq.maps.LatLng(39.916527, 116.397128),      // 地图的中心地理坐标
                    zoom: 20,     // 地图缩放级别
                    mapStyleId: 'style1',  // 该key绑定的style1对应于经典地图样式，若未绑定将弹出无权限提示窗
                    draggable: true,
                    scrollwheel: true,
                    disableDoubleClickZoom: false,
                });

                
                geolocation = new qq.maps.Geolocation("4SCBZ-JRKLQ-3HS5W-GZSPH-VUF2J-AOFUI", "weibo");
                geolocation.getLocation(showPosition, showErr, options)

            }
            //调用初始化函数
            init();

        }
    </script>
</head>

<body>
    <!--   定义地图显示容器   -->
    <div id="container"></div>
</body>

</html>